<template>
  <div class="BRL">
    <ul>
      <li>
        <span>{{$t('language.rechange.currency')}}</span>
        <el-select  v-model="brl" placeholder="BRL" class="BRL-select rechange-select"
            popper-class="BRL-popper" :popper-append-to-body="false">
            <el-option label="BRL" class="el-option" value="BRL">
              <NuxtImg src="/img/T.png" alt="" />
              <span>USDT</span>
            </el-option>
            <template #prefix>
              <NuxtImg style="width: 24px;" src="/img/mylrft.png" alt="" />
              <!-- <el-icon color="#c0c4cc" size="32">
                <User />
              </el-icon> -->
              <strong></strong>
            </template>
          </el-select>
      </li>
      <li>
        <span>{{$t('language.rechange.Network')}}</span>
        <el-select  v-model="PIX" placeholder="PIX I" class="BRL-select rechange-select"
            popper-class="BRL-popper" :popper-append-to-body="false">
            <el-option label="PIX I" class="el-option" value="PIX I">
             
              <!-- <span>PIX I</span> -->
            </el-option>
            <template #prefix>
              <!-- <NuxtImg style="width: 24px;" src="/img/mylrft.png" alt="" /> -->
              <!-- <el-icon color="#c0c4cc" size="32">
                <User />
              </el-icon> -->
              <!-- <strong>PIX I</strong> -->
            </template>
          </el-select>
      </li>
    </ul>
    <h3>{{ $t("language.rechange.BRL.title2") }}</h3>
    <Transition name="fade">
      <ol >
        <li v-for="(item, index) in moneyinfo.fixedAmounts" @click="money($dot(item.amounts), item.id)" :key="index">
          <div :class="rechange.productId == item.id ? 'activem' : ''">
           {{ $dot(item.amounts) }} {{ $t("language.rechange.USDT.money") }}</div>

        </li>
        <li v-for="item in 3-(moneyinfo.fixedAmounts.length%3)"></li>
      </ol>
    </Transition>

    <div class="input">
      <span>{{ $t("language.rechange.USDT.money") }}</span>
      <el-input type="number" v-model="rechange.payAmount"
        :placeholder="$dot(moneyinfo.minAmount) + '~' + $dot(moneyinfo.maxAmount)" />
    </div>
    <footer>
      <el-button :loading="loading" loading-type="spinner" :disabled="loading || rechange.payAmount == ''"
        @click="rechangesubmit">{{ $t("language.rechange.USDT.footbtn") }}</el-button>
      <div></div>
      <p>
        <span>{{ $t("language.rechange.USDT.p1") }}</span>
        <strong @click="$openPage('/kefu')">{{ $t("language.rechange.USDT.p2") }}</strong>
        <span>{{ $t("language.rechange.USDT.p3") }}</span>
      </p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref,shallowRef, reactive, nextTick} from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let store = useStore()
let userinfo = computed(() => store.$state.userinfo)
let brl = shallowRef<string>('BRL')
let PIX = shallowRef<string>('PIX I')
let rechange = reactive({
  id: userinfo.value.gameID,
  coinType: 1,
  payMode: 0,
  isFixed: true,
  productId: 11,
  payAmount: "",
});
let loading = shallowRef<boolean>(false);
//获取充值数据
let moneyinfo: any = reactive({
  coinType: 0,
  fixedAmounts: [],
  maxAmount: 1000000,
  minAmount: 2000,
  payMode: 0,
})
let cointype = () => {
  useHttpPOST(`/Payment/v1.0/User/Recharge/Protocol`, { id: userinfo.value.gameID })
    .then((res: any) => {
      for (let key in res.data.value.data.list[0]) {
        moneyinfo[key] = res.data.value.data.list[0][key];
      }
    });
};
cointype()
//充值
let rechangesubmit = () => {
  loading.value = true;
  useHttpPOST(`/Payment/v1.0/Web/User/Recharge`, { ...rechange })
    .then((res: any) => {
      switch (res.data.code) {
        case 400:
          ElMessage({
            message: t("language.commontips.usernoexist"),
            type: "error",
            duration: 1000,
          });
          break;
        case 0:
          ElMessage({
            message: t("language.commontips.rechangetips"),
            duration: 1000,
            type: "success",
          });
          break;
      }
    })
    .finally(() => {
      nextTick(() => {
        loading.value = false;
      });
    });
};
let btnindex = ref(2);
let btn = reactive([
  "language.rechange.USDT.btn1",
  "language.rechange.USDT.btn2",
]);
let money = (val: string, id: number) => {
  rechange.payAmount = val;
  rechange.productId = id
};
</script>

<style scoped lang="scss">
.BRL {
  width: 100%;
  padding: 16px 16px 0;
ul {
  @include flex(row,space-between,center);
  span {
    font-size: 16px;
    color: #b5bac8;
    display: block;
    margin-bottom: 10px;
  }
  li {
    width: 50%;

  }
  li+li {
    margin-left: 30px;
  }
}
  h3 {
    font-size: 16px;
    color: #b5bac8;
    font-weight: normal;
    margin: 10px 0;
  }

  .icon {
    width: 99px;
    height: 78px;
    border-radius: 10px;
    border: 2px solid #0a906c;
    background-color: rgb(71, 74, 81);

    img {
      width: 25px;
    }

    @include flex(column, center, center);

    strong {
      font-size: 14px;
      color: #ffffff;
      display: block;
      margin-top: 8px;
    }
  }

  p {
    font-size: 15px;
    color: #fff;
    margin: 10px 0 20px 0;
  }

  ol {
    @include flex(row, space-between, flex-start);
    flex-wrap: wrap;

    li {
      width: 32%;
      margin: 0 0px 10px 0;
      cursor: pointer;

      div {
        width: 90%;
        height: 60px;
        @include flex(row, center, center);
        border-radius: 10px;
        background: #1c1f21;
        border-radius: 10px;
        text-align: center;

        font-size: 14px;
        color: #b5bac8;

      }
    }


    .activem {
      border: 2px solid #0a906c;
      color: #fff;
    }
  }

  dl {
    @include flex(row, flex-start, center);

    dd {
      @include flex(row, center, center);
      background-color: #32353e;
      border-radius: 10px;
      cursor: pointer;
      width: 92px;
      height: 45px;
      border: 2px solid #4a4c53;
      text-align: center;
      margin-bottom: 10px;
      font-size: 14px;
      color: #b5bac8;
      font-weight: bold;
    }

    dd+dd {
      margin-left: 15px;
    }

    .activec {
      border: 2px solid #0a906c;
      color: #fff;
      background-color: rgb(71, 74, 81);
    }
  }

  .input {
    height: 45px;
    @include flex(row, flex-start, center);
    margin-top: 5px;

    span {
      font-size: 18px;
      color: #fff;
      margin-right: 10px;
      font-weight: bold;
    }

    :deep(.el-input__wrapper) {
      height: 45px;
      border-radius: 10px;
      background-color: rgb(39, 42, 48);
      box-shadow: none;
      border: 1px solid #4a4c53;
      color: #fff;
      font-weight: bold;
    }

    :deep(.el-input__inner) {
      color: #fff;
      font-weight: bold;
      height: 40px;
    }

    :deep(.el-input__wrapper) {
      height: 40px !important;
    }
  }

  footer {
    width: 100%;
    margin-top: 40px;

    :deep(.el-button) {
      width: 100%;
      text-align: center;
      background-color: #0a906c;
      border-color: #0a906c;
      height: 44px;
      color: #fff;
      border-radius: 5px;
      font-size: 18px;
    }

    p {
      text-align: center;
      margin-top: 20px;

      span {
        font-size: 14px;
        color: #b5bac8;
      }

      strong {
        color: #fff;
        font-weight: normal;
      }
    }
  }
}
</style>
